<template>
  <div :class="prefixCls" :style="wrapStyles">
    <transition-group :name="prefixCls" appear>
      <Message
        v-for="message in messageList"
        :key="message.name"
        :prefix-cls="prefixCls"
        :styles="message.styles"
        :duration="message.duration"
        :render="message.render"
        :content="message.content"
        :closable="message.closable"
        :on-close="message.onClose"
        :name="message.name"
        :background="message.background"
        :msg-type="message.msgType"
      ></Message>
    </transition-group>
  </div>
</template>
<script>
import Message from './message.vue'
let seed = 0;
let transferIndex=0;
const now = Date.now();

function getUuid () {
  return 'haloMessage_' + now + '_' + (seed++);
}
function handleGetIndex () {
  transferIndex++
  return transferIndex;
}
export default{
  components:{Message},
  props: {
    prefixCls: {
      type: String,
      default: ""
    },
    styles: {
      type: Object,
      default: function () {
        return {
          top: '65px',
          left: '50%'
        };
      }
    },
    content: {
      type: String
    }
  },
  data(){
    return {
      messageList:[],
      tIndex: handleGetIndex()
    }
  },
  computed:{
    wrapStyles () {
      let styles = Object.assign({}, this.styles);
      styles['z-index'] = 1010 + this.tIndex;

      return styles;
    }
  },
  methods:{
    add(message){
      const name = message.name || getUuid();
      let _message= Object.assign({
        styles: {
          right: '50%'
        },
        content: '',
        duration: 3,
        closable: false,
        name: name
      }, message);

      this.messageList.push(_message);
      this.tIndex = handleGetIndex();
    },
    close(name){
      const messages = this.messageList;
      for (let i = 0; i < messages.length; i++) {
        if (messages[i].name === name) {
          this.messageList.splice(i, 1);
          break;
        }
      }
    },
    closeAll () {
      this.messageList = [];
    },
  }
}
</script>